<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，未经购买不得使用
  - 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
  - 一经发现盗用、分享等行为，将追究法律责任，后果自负
-->
<template>
	<view>
		<view class="flex radius text-white main electronic-coupons" v-if="couponInfo.type == '1'">
			<view class="flex-twice padding-sm shadow-blur radius t1-r">
				<view class="padding-xs overflow text-sm text-center store"><text class="cuIcon-shop"></text>{{couponInfo.shopInfo.name}}</view>
				<view class="flex">
					<view class="flex-sub flex">
						<text class="text-price text-xl margin-top"></text>
						<text class="text-sl text-bold overflow-1 number margin-left-xs">{{couponInfo.reduceAmount}}</text>
					</view>
					<view class="discount" style="margin: auto; margin-left: -50rpx;">
						<view class="text-xs overflow-1">订单满{{couponInfo.premiseAmount}}元可使用</view>
						<view class="text-xs">{{couponInfo.suitType == '1' ? '全部商品可用' : couponInfo.suitType == '2' ? '指定商品可用' : couponInfo.suitType == '3' ? '指定商品不可用' : ''}}</view>
					</view>
				</view>
				<view class="validity margin-top-sm text-center">
					<view class="text-xs" v-if="couponInfo.expireType == '1'">领取后{{couponInfo.validDays}}天有效</view>
					<view class="text-xs" v-if="couponInfo.expireType == '2'">{{couponInfo.validBeginTime}}至{{couponInfo.validEndTime}}</view>
				</view>
			</view>
			<view class="flex-sub padding-sm shadow-blur radius text-center t1-l">
				<view class="ticket margin-top-sm">代金券</view>
				<button class="cu-btn bg-white round text-bold sm margin-top-sm" v-if="!couponInfo.couponUser" @tap="couponUserSave">立即领取</button>
				<view v-if="couponInfo.couponUser">
					<view class="padding-xs text-bold" v-if="!toUse">已领取</view>
					<navigator hover-class="none" :url="'/pages/goods/goods-list/index?couponUserId=' + couponInfo.couponUser.id"
					 class="cu-btn bg-white text-xs round sm margin-top-sm" v-if="toUse">已领取，去使用</navigator>
				</view>
			</view>
		</view>
		<view class="flex radius text-white main electronic-coupons" v-if="couponInfo.type == '2'">
			<view class="flex-twice padding-sm shadow-blur radius t2-r">
				<view class="padding-xs overflow text-sm text-center store"><text class="cuIcon-shop"></text>{{couponInfo.shopInfo.name}}</view>
				<view class="flex">
					<view class="flex-sub flex">
						<text class="text-sl text-bold overflow-1 number">{{couponInfo.discount}}</text>
						<text class="text-sm margin-top-lg margin-left-xs">折</text>
					</view>
					<view class="discount" style="margin: auto; margin-left: -50rpx;">
						<view class="text-xs overflow-1">订单满{{couponInfo.premiseAmount}}元可使用</view>
						<view class="text-xs">{{couponInfo.suitType == '1' ? '全部商品可用' : couponInfo.suitType == '2' ? '指定商品可用' : couponInfo.suitType == '3' ? '指定商品不可用' : ''}}</view>
					</view>
				</view>
				<view class="validity margin-top-sm text-center">
					<view class="text-xs" v-if="couponInfo.expireType == '1'">领取后{{couponInfo.validDays}}天有效</view>
					<view class="text-xs" v-if="couponInfo.expireType == '2'">{{couponInfo.validBeginTime}}至{{couponInfo.validEndTime}}</view>
				</view>
			</view>
			<view class="flex-sub padding-sm shadow-blur radius text-center t2-l">
				<view class="ticket margin-top-sm">折扣券</view>
				<button class="cu-btn bg-white text-bold round sm margin-top-sm" v-if="!couponInfo.couponUser" @tap="couponUserSave">立即领取</button>
				<view v-if="couponInfo.couponUser">
					<view class="padding-xs text-bold" v-if="!toUse">已领取</view>
					<navigator hover-class="none" :url="'/pages/goods/goods-list/index?couponUserId=' + couponInfo.couponUser.id"
					 class="cu-btn bg-white text-xs round sm margin-top-sm" v-if="toUse">已领取，去使用</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * Copyright (C) 2018-2019
	 * All rights reserved, Designed By www.joolun.com
	 * 注意：
	 * 本软件为www.joolun.com开发研制，未经购买不得使用
	 * 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
	 * 一经发现盗用、分享等行为，将追究法律责任，后果自负
	 */
	import api from 'utils/api'

	export default {
		data() {
			return {};
		},

		components: {},
		props: {
			couponInfo: {
				type: Object,
				default: () => ({})
			},
			toUse: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			couponUserSave() {
				api.couponUserSave({
					couponId: this.couponInfo.id
				}).then(res => {
					uni.showToast({
						title: '领取成功',
						icon: 'success',
						duration: 2000
					});
					this.couponInfo.couponUser = res.data;
					this.$emit('receiveCoupon', this.couponInfo);
				});
			}

		}
	};
</script>
<style>
	.electronic-coupons {
		height: 200rpx;
	}

	.t1-r {
		background: radial-gradient(circle at top right, transparent 5px, #f37b1d 0) top right, radial-gradient(circle at bottom right, transparent 5px, #f37b1d 0) bottom right;
		background-size: 100% 60%;
		background-repeat: no-repeat;
	}

	.t1-l {
		background: radial-gradient(circle at top left, transparent 5px, #f37b1d 0) top left, radial-gradient(circle at bottom left, transparent 5px, #f37b1d 0) bottom left;
		background-size: 100% 60%;
		background-repeat: no-repeat;
		border-left: 2rpx dashed rgba(255, 255, 255, .3);
	}

	.store{
		margin-top: -20rpx;
	}

	.number{
		font-size: 68rpx;
	}

	.discount{
		margin: auto;
		margin-left: -50rpx;
		padding: -50rpx;
	}

	.t2-r {
		background: radial-gradient(circle at top right, transparent 5px, #39b54a 0) top right, radial-gradient(circle at bottom right, transparent 5px, #39b54a 0) bottom right;
		background-size: 100% 60%;
		background-repeat: no-repeat;
	}

	.t2-l {
		background: radial-gradient(circle at top left, transparent 5px, #39b54a 0) top left, radial-gradient(circle at bottom left, transparent 5px, #39b54a 0) bottom left;
		background-size: 100% 60%;
		background-repeat: no-repeat;
		border-left: 2rpx dashed rgba(255, 255, 255, .3);
	}
</style>
